<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- <child content='<p>Dell</p>'></child> -->
			<child>
				<p>Dell</p>
			</child>
			<body-content>
				<!-- <div class="header" slot="header">header</div> -->
				<div class="footer" slot="footer">footer</div>
			</body-content>
		</div>
		<script type="text/javascript">
		Vue.component('child',{
			props:['content'],
			/* 非插槽用法 */
			/* template: 	`<div>
						<p>hello</p>
						<div v-html="this.content"></div>
						</div>` */
			template:	`<div>
							<p>Hello</p>
							<slot>默认内容</slot>
						</div>`
		});
		Vue.component('body-content',{
			template:	`<div>
							<slot name='header'>
							<h1>default header</h1>
							</slot>
							<div class='content'>Hello</div>
							<slot name='footer'></slot>
						</div>`
		});
		
			var vm = new Vue({
				el:'#app'
			});
		</script>
	</body>
</html>
